<!DOCTYPE html>
<html lang="en">

<head>



    <!-- jQuery文件 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>


    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小斯同学</title>

    <link type="text/css" rel="stylesheet" href="first.css" />

    <link type="text/css" rel="stylesheet" href="second.css" />

</head>

<body>

    <audio src="" id="voice" autoplay style="display: none;"></audio>
    <div class="screen">
        <div class="phone_header">
            <div class="phone_header_cj" style="margin-left: 323px;"><span style="font-size: 18px;">自助客服</span></div>
            <!-- <div class="phone_header_cj"><img src="https://ps.ssl.qhimg.com/t01ba6ea141fbcb6e8f.jpg" alt=""></div> -->
        </div>
        <div class="phone_body">

            <div class="left_role">
                <div class="left_role_img_div">
                    <img class="left_role_img" src="https://ps.ssl.qhimg.com/t01ba6ea141fbcb6e8f.jpg" alt="">
                </div>
                <div class="left_role_word_div">
                    <span class="left_role_word">你好呀！我是小斯</span>
                </div>
            </div>



        </div>
        <div class="phone_footer">
            <img class="phone_footer_img" src="https://ps.ssl.qhimg.com/t01ba6ea141fbcb6e8f.jpg" alt="">

            <!-- <input style="resize:none" cols="20" class="talk_input"></input> -->
            <input style="resize:none" class="talk_input"></input>
            <button id="send">发送</button>
        </div>
    </div>



</body>

<script>
    $(document).ready(function () {


        $("#send").click(function () {
            var text = $(".talk_input").val();
            if (text.trim() == "") {
                alert("空！");
                return $(".talk_input").val('');
            } else {

                $(".phone_body").append(
                    '<div class="right_role"><div class="right_role_img_div"><img class="right_role_img" src="https://ps.ssl.qhimg.com/t01ba6ea141fbcb6e8f.jpg" alt="" /></div><div class="right_role_word_div"><span class="right_role_word">' +
                    text + '</span></div></div>'
                );
                $(".talk_input").val('');

                //重置滚动条在最底部
                $(".phone_body").scrollTop($(".phone_body")[0].scrollHeight);
                getMsg(text);
            }
        });


        function getMsg(text) {
            $.ajax({
                method: 'GET',
                url: 'http://www.liulongbin.top:3006/api/robot',
                data: {
                    spoken: text
                },
                success: function (res) {
                    if (res.message === 'success') {
                        var msg = res.data.info.text
                        $(".phone_body").append(
                            '<div class="left_role"><div class="left_role_img_div"><img class="left_role_img" src="https://ps.ssl.qhimg.com/t01ba6ea141fbcb6e8f.jpg" alt=""></div><div class="left_role_word_div"><span class="left_role_word">' +
                            msg + '</span></div></div>')

                        //滚动条重置
                        //重置滚动条在最底部
                        $(".phone_body").scrollTop($(".phone_body")[0].scrollHeight);
                        //发起请求，将机器人的聊天消息转换为语音格式

                    }
                }
            })
        }

        $('.talk_input').on('keyup', function (e) {
            //e.keyCode 可以获取到当前按键的编码
            if (e.keyCode === 13) {
                //调用按钮元素的click函数，可以通过编程的方式除法按钮的点击事件
                $('#send').click();
            }
        });

    });
</script>



</html>